<template>
  <div class="To" v-cloak>
    <h3>TodoList</h3>
    <input type="text" v-model="text" @keydown.enter="add()">
    <button class="btn" @click="add()">添加</button>
    <List1 :msg="arr"></List1>
  </div>
</template>

<script>
//1.引入组件
import List1 from "@/components/List1"

export default {
  name: 'Todo',
  data () {
    return {
      text:"",
      arr:[],
    }
  },
  //2.注册组件
  components:{List1},

  methods: {
    add(){
        if(this.text){
          this.arr.unshift(this.text);
          this.text="";
          var t=JSON.stringify(this.arr);
          sessionStorage.setItem("text",t);
        }
    }
  },
  mounted(){
    if (sessionStorage.getItem("text")) {
      var t1=JSON.parse(sessionStorage.getItem("text"));
      this.arr=t1;
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
        [v-cloak]{
          display: none;
        }
        .show{
          width:212px;
          border: 1px solid black;
          background-color:cyan;
          margin:auto;
          margin-top:2px;
  
        }
</style>
